<template>
  <div class="controls">
    <div class="control-group">
      <label for="page">页码:</label>
      <input type="number" id="page" :value="currentPage" @input="$emit('update:currentPage', $event.target.value)" min="1" :max="numPages">
      <span>/ {{ numPages || 0 }}</span>
    </div>

    <!-- <div class="control-group">
      <label for="scale">缩放:</label>
      <select id="scale" :value="scale" @change="$emit('update:scale', $event.target.value)">
        <option value="0.5">50%</option>
        <option value="0.75">75%</option>
        <option value="1">100%</option>
        <option value="1.25">125%</option>
        <option value="1.5">150%</option>
        <option value="2">200%</option>
      </select>
    </div> -->

    <!-- <button @click="$emit('update:rotate', rotate + 90)">
      <i class="fas fa-redo"></i> 旋转
    </button> -->

    <button @click="$emit('prev-page')" :disabled="currentPage <= 1">
      <i class="fas fa-chevron-left"></i> 上一页
    </button>

    <button @click="$emit('next-page')" :disabled="currentPage >= numPages">
      下一页 <i class="fas fa-chevron-right"></i>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: Number,
    numPages: Number,
    scale: Number,
    rotate: Number
  }
}
</script>